<script setup>
import HeaderComp from '@/components/HeaderComp.vue';
import { ref, computed } from 'vue'
// 原始数据
const roleList = [{
    id: 1,
    name: '老板'
}, {
    id: 2,
    name: '经理'
}, {
    id: 3,
    name: '运营总监'
}, {
    id: 4,
    name: 'CEO'
}, {
    id: 5,
    name: '销售'
}, {
    id: 6,
    name: '实施'
}, {
    id: 7,
    name: '程序员'
}, {
    id: 8,
    name: 'UI工程师'
}, {
    id: 9,
    name: '产品经理'
}];

// 用户已选择的数组
const selectedRoleList = ref([]);

// 未选择的数据
const unSelectedRoleList = computed(() => {
    return roleList.filter(item => !selectedRoleList.value.some(selectedRole => selectedRole.id == item.id))
})

function selectRole(role) {
    selectedRoleList.value.push(role)
}

function delSelect(index) {
    selectedRoleList.value.splice(index, 1)
}
</script>

<template>
    <HeaderComp title="角色列表"></HeaderComp>
    <div>
        <!-- 未选择的角色 -->
        <div class="left">
            <ul>
                <li v-for="item in unSelectedRoleList" @click="selectRole(item)">
                    {{ item.name }}
                </li>
            </ul>
        </div>
        <!-- 已经选择的角色 -->
        <div class="right">
            <ul>
                <li v-for="(item, index) in selectedRoleList">
                    {{ item.name }}
                    <button @click="delSelect(index)">删除</button>
                </li>
            </ul>
            <button>提交</button>
        </div>
    </div>
</template>


<style>
.left {
    float: left;
    width: 50%;
    height: 500px;
    background-color: lightblue;
}

.right {
    float: left;
    width: 50%;
    height: 500px;
    background-color: lightcoral;
}
</style>